import  { useState, useEffect } from "react";
import { Card, Button, Tag, Statistic, Row, Col, Divider, Modal, message } from "antd";
import { formatRange, isInCrowdFundingPeriod } from "@/tool/format";

type Props = {
  data: any;
};

function QtSingle({ data }: Props) {
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [detail, setDetail] = useState(data);

  // 关键：监听 data 变化，及时同步 detail
  useEffect(() => {
    setDetail(data);
  }, [data]);

  // 支持确认
  const handleSupport = () => {
    setConfirmOpen(true);
  };

  // 确认支持
  const handleConfirm = () => {
    setConfirmOpen(false);
    if (!detail?.id) return;
    // 读取并更新本地存储
    const list = JSON.parse(localStorage.getItem("crowdFundingList") || "[]");
    const idx = list.findIndex((item: any) => item.id === detail.id);
    if (idx > -1) {
      list[idx].supported = Number(list[idx].supported || 0) + 1;
      localStorage.setItem("crowdFundingList", JSON.stringify(list));
      setDetail({ ...list[idx] });
      message.success("支持成功！");
    }
  };

  // 判断是否真正进行中
  const isActive = detail.status === 1 && isInCrowdFundingPeriod(detail.time);

  return (
    <div style={{ maxWidth: 480, margin: "0 auto" }}>
      <Card
        hoverable
        cover={
          detail?.img_link ? (
            <img
              src={detail.img_link}
              alt="产品图片"
              style={{
                width: "100%",
                height: 220,
                objectFit: "cover",
                borderRadius: "8px 8px 0 0",
                background: "#f5f5f5",
              }}
            />
          ) : (
            <div
              style={{
                width: "100%",
                height: 220,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                background: "#fafafa",
                color: "#bbb",
                fontSize: 18,
                borderRadius: "8px 8px 0 0",
              }}
            >
              暂无图片
            </div>
          )
        }
       
         styles={{ body: { padding: 24 } }}
      >
        <h2 style={{ marginBottom: 8, fontWeight: 700 }}>
          {detail?.title || "暂无标题"}
        </h2>
        <div style={{ color: "#888", marginBottom: 16, minHeight: 40 }}>
          {detail?.description || "暂无产品介绍"}
        </div>
        <Row gutter={16} style={{ marginBottom: 16 }}>
          <Col span={12}>
            <Statistic
              title="单价"
              value={detail?.price || 0}
              suffix="元"
              valueStyle={{ fontSize: 18 }}
            />
          </Col>
          <Col span={12}>
            <Statistic
              title="目标金额"
              value={detail?.target_value || 0}
              suffix="元"
              valueStyle={{ fontSize: 18 }}
            />
          </Col>
        </Row>
        <Row gutter={16} style={{ marginBottom: 16 }}>
          <Col span={12}>
            <Statistic
              title="已支持人数"
              value={detail?.supported || 0}
              suffix="人"
              valueStyle={{ fontSize: 18 }}
            />
          </Col>
          <Col span={12}>
            <Statistic
              title="已筹集"
              value={
                detail?.price && detail?.supported
                  ? Number(detail.price) * Number(detail.supported)
                  : 0
              }
              suffix="元"
              valueStyle={{ fontSize: 18 }}
            />
          </Col>
        </Row>
        <Divider style={{ margin: "16px 0" }} />
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
          <span style={{ color: "#888" }}>众筹时间</span>
          <span>{detail?.time ? formatRange(detail.time) : "暂无数据"}</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
          <span style={{ color: "#888" }}>众筹状态</span>
          <Tag color={detail?.status === 1 ? "green" : "default"}>
            {detail?.status === 1 ? "进行中" : "已结束"}
          </Tag>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
          <span style={{ color: "#888" }}>产品链接</span>
          {detail?.link ? (
            <a href={detail.link} target="_blank" rel="noopener noreferrer">
              查看详情
            </a>
          ) : (
            <span style={{ color: "#bbb" }}>暂无数据</span>
          )}
        </div>
        <Button
          type="primary"
          size="large"
          block
          style={{
            marginTop: 24,
            fontWeight: 600,
            letterSpacing: 2,
            background: !isActive ? "#d9d9d9" : undefined,
            borderColor: !isActive ? "#d9d9d9" : undefined,
            color: !isActive ? "#888" : undefined,
            cursor: !isActive ? "not-allowed" : undefined,
          }}
          onClick={handleSupport}
          disabled={!isActive}
        >
          {isActive ? "立即支持" : "活动已截止"}
        </Button>
      </Card>
      <Modal
        open={confirmOpen}
        title="确认支持"
        onOk={handleConfirm}
        onCancel={() => setConfirmOpen(false)}
        okText="确认"
        cancelText="取消"
        centered
       
      >
        <p>确定要支持该项目吗？</p>
      </Modal>
    </div>
  );
}

export default QtSingle;
